<template>
  <div class="index_banner">
    <Swipe class="my-swipe" :auto="0"><!-- swipe 设置不自动滚动 -->
      <Swipe-item class="slide slide1">
        <router-link to="/search/美食">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic1.jpeg" alt="">
            <p>美食</p>
          </div>
        </router-link>
        <router-link to="/search/甜品饮品">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic2.jpeg" alt="">
            <p>甜品饮品</p>
          </div>
        </router-link>
        <router-link to="/search/商店超市">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic3.jpeg" alt="">
            <p>商店超市</p>
          </div>
        </router-link>
        <router-link to="/search/预定早餐">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic4.jpeg" alt="">
            <p>预定早餐</p>
          </div>
        </router-link>
        <router-link to="/search/果蔬生鲜">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic5.jpeg" alt="">
            <p>果蔬生鲜</p>
          </div>
        </router-link>
        <router-link to="/search/新店特惠">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic6.jpeg" alt="">
            <p>新店特惠</p>
          </div>
        </router-link>
        <router-link to="/search/准时达">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic7.jpeg" alt="">
            <p>准时达</p>
          </div>
        </router-link>
        <router-link to="/search/夜宵">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic8.jpeg" alt="">
            <p>夜宵</p>
          </div>
        </router-link>
      </Swipe-item>

      <Swipe-item class="slide slide2">
        <router-link to="/search/土豪推荐">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic9.jpeg" alt="">
            <p>土豪推荐</p>
          </div>
        </router-link>
        <router-link to="/search/鲜花蛋糕">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic10.jpeg" alt="">
            <p>鲜花蛋糕</p>
          </div>
        </router-link>
        <router-link to="/search/汉堡">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic11.jpeg" alt="">
            <p>汉堡</p>
          </div>
        </router-link>
        <router-link to="/search/日韩料理">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic12.jpeg" alt="">
            <p>日韩料理</p>
          </div>
        </router-link>
        <router-link to="/search/麻辣烫">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic13.jpeg" alt="">
            <p>麻辣烫</p>
          </div>
        </router-link>
        <router-link to="/search/披萨意面">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic14.jpeg" alt="">
            <p>披萨意面</p>
          </div>
        </router-link>
        <router-link to="/search/川湘菜">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic15.jpeg" alt="">
            <p>川湘菜</p>
          </div>
        </router-link>
        <router-link to="/search/包子粥店">
          <div class="common_slider">
            <img src="./../../images/slider-pic/slider-pic16.jpeg" alt="">
            <p>包子粥店</p>
          </div>
        </router-link>
      </Swipe-item>
    </Swipe>
  </div>
</template>

<script>
    // import HeaderComponent from './components/header.vue'
    import { Swipe, SwipeItem } from 'vue-swipe';

    export default{
        //父组件传入的数据
        props: {} ,
        components: {
          Swipe,
          SwipeItem
        },
        //本地数据
        data(){
            return {
                msg: 'hello vue'
            }
        } ,
        //方法
        methods: {} ,
        //进入页面加载
        mounted () {

        } ,
        //计算属性
        computed: {} ,
        //监控数据变化
        watch: {}

    }
</script>

<style lang="less" >
  .index_banner{
    height:1.8rem;
    background:#fff;
    margin-bottom:0.2rem;
    .slide{
      padding: .07rem;
      box-sizing: border-box;
    }
    .common_slider{
      width:.9rem;
      height:.7rem;
      float: left;
      img{
        margin: 0 auto;
        display:block;
        width:.4rem;
        height:.4rem;
        margin-top:.1rem;
      }
      p{
        margin-top:.1rem;
        text-align:center;
        font-size: .1rem;
      }
    }
  @baseBlue: #0096ff;
  @com_gray1: #666;
  @com_gray2: #999;
  .com_gray1{
    color:@com_gray1;
  }
  .com_gray2{
    color:@com_gray2;
  }
  .com_blue{
    color:@baseBlue;
  }
  /* slider插件css + 改写*/
  .mint-swipe,.mint-swipe-items-wrap{overflow:hidden;position:relative;height:100%}
  .mint-swipe-items-wrap>div{position:absolute;-webkit-transform:translateX(-100%);transform:translateX(-100%);width:100%;height:100%;display:none}
  .mint-swipe-items-wrap>div.is-active{display:block;-webkit-transform:none;transform:none}
  .mint-swipe-indicators{position:absolute;bottom:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
  .mint-swipe-indicator{width:.05rem;height:.05rem;display:inline-block;border-radius:50%;background:#ccc;margin:0 3px;opacity: 0.9}
  .mint-swipe-indicator.is-active{background:@baseBlue; }

  }

</style>
